<!-- 稿件详情 -->
<template>
	<view>
		<!-- 审核状态S -->
		<view class="shenhe tp-ptb0lr30 tp-pt30" v-if="detail.status=='2'">
			<view class="flex flex_between">
				<view class="tp-fz32">
					<text style="color: #666666;">状态</text><text style="color: #333333;">: 审核未通过</text>
				</view>
				<view class="anniu" @click="again">
					重新发布
				</view>
			</view>
			<view class="tp-fz28 tp-mt20 tp-pb30" style="color: #666666;">
				未通过原因 <text>: {{detail.failReason}}</text>
			</view>
		</view>
		<!-- 审核状态E -->
		<view class="gaojian  ">
			<view class="tp-ptb0lr30 flex flex_between tp-pt30">
				<view class="tp-fz26 ellispsis1 tp-lh40">{{detail.articleName}}</view>
			</view>
			<view class="tp-ptb0lr30 flex flex_between " style="padding-top: 20rpx;margin-bottom: 30rpx;">
				<view class="flex align_center">
					<image class="tp-img44 tp-mr10" style="border-radius: 50%;" :src="detail.customerAvater"  mode="aspectFill"></image>
					<text class="tp-fz22 ellispsis1 tp-lh40 tp-mr10">投稿人: </text>
					<text class="tp-fz22 ellispsis1 tp-lh40">{{detail.customerName}}</text>
				</view>
				<view class="tp-ptb0lr20 tp-fz22 tp-fc999">
					<text class="tp-mr10 tp-lh44">{{detail.createTime}}</text>
				</view>
			</view>
			<view v-if="detail.fileContent!=null">
				<view class="dasangjf tp-ptb0lr20 flex align_center flex_between">
					<view class="flex align_center flex_start">
						<image class="tp-img64 tp-mr20" src="../static/icon/word.png" mode=""></image>
						<text class="tp-mr10 tp-fz28">得票数:</text>
						<text class="tp-fz28">{{detail.voteNum}}</text>
					</view>
					<view class="lookthis tp-fz24 tp-tc" @click="open">
						<text style="">查看</text>
					</view>
				</view>
			</view>
			<!-- 图片轮播 S -->
			<view class="img_swiper_box" v-if="swpList.length!=0">
				<swiper @change="change" class="swiper" circular autoplay="true" indicator-active-color=#FFFFFF indicator-color=#999999
				 indicator-dots=true interval="2000" duration="500">
					<swiper-item class="tp-w100 tp-h100" v-for="(item,index) in swpList" :key="index" @click="previewImg(item,swpList)">
						<view class="swiper-item">
							<image :src="item" style="border-radius: 8rpx;" ></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- <swiper-dot style="margin-bottom: 30rpx;" class="dot" :current="current" :list="swpList"></swiper-dot> -->

			</view>
			<!-- 图片轮播 E -->
			<!-- 短视频 S-->
			<video v-if="detail.video" class="video" :src="wwwImgUrl + detail.video" style="video"></video>
			<!-- 短视频 E-->
			<view class="text-box" v-if="detail.intro!=null">
				<view class="text tp-fz26 tp-lh40">
					<text>{{detail.intro || ''}}</text>
				</view>
			</view>
			<view style="width: 90%;margin: 0 auto;">
				<view class="txt">
					<jyf-parser :html="detail.content" ref="article"></jyf-parser>
				</view>
			</view>
			
			<view class="fx-bottom flex flex_start" v-if="detail.status == 1">
				<view class="" style="margin-left: 150rpx;margin-right: 260rpx;">
					<button class="sharebutton" type="default" open-type="share">
					<image class="tp-img64"  src="../static/icon/toyou.png" mode=""></image>
					</button>
					<view style="margin: 10rpx 0 0 8rpx;">
						<text >分享</text>
					</view>
					
				</view>
				<view class="">
					<image class="tp-img64" v-if="detail.isVote==1"  src="../static/icon/notnice.png" mode="" @click="toupiao"></image>
					 <image class="tp-img64" v-if="detail.isVote==0"  src="../static/icon/nice.png" mode="" @click="toupiao"></image>
					<view style="margin: 10rpx 0 0 6rpx;">
						<text >投票</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	import swiperDot from '@/components/swiperDot/swiperDot.vue'; // swiper
	export default {
		components: {
			swiperDot,
			jyfParser
		},
		data() {
			return {
				swpList: [], // //获取的图片
				current: 0, // swiper
				id: '',
				detail: '', //获取的详情
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id
			uni.setNavigationBarTitle({
				title: '稿件详情' //自定义,替换得到的值
			});
			this.getdetail()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getdetail()
		},
		// 分享
		onShareAppMessage(res) {
			return {
				title: this.detail.articleName,
				path: 'pagesSecond/strategy/strategyHdgjdetail?id=' + this.id,
				// imageUrl: this.$imgUrl + this.scenicDetail.jqCover
			}
		},
		methods: {
			/* swiper 切换 */
			change(e) {
				this.current = e.detail.current;
			},
			//重新发布 判断去哪个页面
			again(){
				if( this.detail.detailType == 0 ){
					uni.navigateTo({
						url: '/pagesSecond/strategy/onlineCranium?xqid=' + this.id
					})
				}
				if( this.detail.detailType == 1 ){
					uni.navigateTo({
						url: '/pagesSecond/strategy/strategyRelease?xqid=' + this.id 
					})
				}
				
			}, 
			//打开文档
			open() {
				const that = this
				//打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
				console.log(that.detail.fileContent)
				uni.downloadFile({
					url: that.detail.fileContent,
					success: function(res) {
						console.log(res)
						var filePath = res.tempFilePath;
						//打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail() {
								uni.showToast({
									title: '暂不支持此类型',
									duration: 2000
								});
								/* uni.hideLoading();
								that.downloadFile_onoff = true; */
							}
						});
					}
				});
			},
			//详情数据
			getdetail() {
				this.$http.get(this.$api.activityDetailDesc + '?detailId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						let nowlist = []
						let arr = []
						if(res.data.images!=null){
							 arr = res.data.images.split(",")
							nowlist = arr.map(item => {
								if (!item.startsWith('http')) {
									let str = this.$imgUrl + item
									return  str
								}
							})
						}
						this.swpList = nowlist
						this.detail = res.data
						if(res.data.fileContent!=null){
							if (!this.detail.fileContent.startsWith('http')) {
								this.detail.fileContent = this.$imgUrl + this.detail.fileContent
							}
						}
						if(res.data.customerAvater!=null){
							if (!this.detail.customerAvater.startsWith('http')) {
								this.detail.customerAvater = this.$imgUrl + this.detail.customerAvater
							}
						}
					}
				})
			},
			//投票
			toupiao(){
				this.$http.get(this.$api.activityvoteOrNo + '?detailId=' + this.id).then(res => {
					if(res.code == 200){
						this.getdetail()
							uni.showToast({
								title: '操作成功',
								duration: 2000
							});
					}
				})
			},
			// 预览图片
			previewImg(url, swpList) {
				uni.previewImage({
					current: url,
					urls: swpList,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 视频 S*/
	 .video {
		margin: 30rpx;
		width: 690rpx;
		height: 360rpx;
		border-radius: 8rpx;
	} 
	
	/* 审核状态 S*/
	.shenhe{
		background: #EEFAFF;
	
	}
	.anniu{
		width: 120rpx;
		height: 40rpx;
		background: #FFAF3C;
		border-radius: 8rpx;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
	}
	/* 审核状态E */
	.sharebutton {
		background: transparent;
		padding: 0;
		line-height: 40rpx;
	
		&::after {
			border: 0;
		}
	}
	.gaojian {
		width: 100%;
		background: #FFFFFF;
	}

	.dasangjf {
		margin: 0 30rpx 0rpx 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		line-height: 88rpx;
		box-sizing: border-box;

		.lookthis {
			width: 88rpx;
			height: 40rpx;
			background: #FFFFFF;
			border: 2rpx solid #00B4FF;
			border-radius: 4rpx;
			color: #00B4FF;
			line-height: 40rpx;
		}
	}

	/*轮播S--*/
	.img_swiper_box {
		padding-bottom: 30rpx;
		width: 100%;
		height: 420rpx;
		position: relative;

		.swiper-item {
			padding: 30rpx;
			height: 420rpx;
		}

		//圆点
		/* .dot {
			border-radius: 50%;

			position: absolute;
			left: 50%;
			bottom: 40rpx;
			transform: translateX(-50%);
		} */
	}

	/*轮播E--*/
	.text-box {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;

		.text {
			width: 690rpx;
		}
	}

	.fx-bottom {
		width: 690rpx;
		padding: 30rpx 0 80rpx 30rpx;
	}
</style>
